<template>
  <div style="margin-left: 20px;margin-top: 30px;">
    <el-form ref="form" :model="form" label-width="150px" align="center" style="width:500px" :rules="rules">
      <el-form-item label="付款人账户" prop="account">
        <el-input v-model="form.account" :disabled="true" />
      </el-form-item>
      <el-form-item label="收款人账户" prop="payeeAccount">
        <el-input v-model="form.payeeAccount" />
      </el-form-item>
      <el-form-item label="收款人姓名" prop="payeeName">
        <el-input v-model="form.payeeName" />
      </el-form-item>
      <el-form-item label="转账金额（元）" prop="money">
        <el-input v-model="form.money" />
      </el-form-item>
      <el-form-item label="取款密码" prop="password">
        <el-input v-model="form.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="转账备注" prop="extract">
        <el-input type="textarea" placeholder="请输入内容" v-model="form.extract" maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="float: left;width:'100px ,!important'"
          @click="submitForm('form')">确定转账</el-button>
        <el-button style="float: right;width:'100px ,!important'" @click="resetForm('form')">取消转账</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { transformMoney } from '@/api/api'
import {Encrypt} from '@/utils/secret'

export default {
  data() {
    return {
      form: {
        account: '',
        payeeAccount: '',
        payeeName: '',
        money: '',
        password: '',
        extract:''
      },
      rules: {
        payeeAccount: [
          {
            required: true,
            min: 16,
            max: 20,
            message: '长度在 16 到 20 个字符',
            trigger: 'blur'
          }
        ],
        payeeName: [
          {
            required: true,
            message: '请输入收款人姓名',
            trigger: 'blur',
            min: 2,
            max: 13
          }
        ],
        money: [
          {
            required: true,
            message: '请输入包含两位小数转账金额',
            pattern: /^([1-9]\d{0,9}|0)(\.\d{1,2})?$/,
            trigger: 'blur',
            min: 2,
            max: 20
          }
        ],
        password: [
          {
            required: true,
            pattern: /^[0-9]{6}$/,
            message: '请输入包含数字的6位支付密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.form.account = localStorage.getItem('bankCard')
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          // console.log("this.encrypt(this.form.password)",Encrypt(this.form.password));
          transformMoney({ 'password':Encrypt(this.form.password), 'targetBankCard': this.form.payeeAccount, 'targetUserName': this.form.payeeName, transferAmount: this.form.money,"extract":this.form.extract }).then(res => {
            console.log('res', res)
            if (res.data.responseStatusCode == 200) {
              this.money = res.data.data.currentBalance
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'success'
              })
              this.resetForm('form')
            } else if (res.data.responseStatusCode == 408) {
              localStorage.removeItem('token')
              localStorage.removeItem('role')
              localStorage.removeItem('username')
              localStorage.removeItem('bankCard')
              this.$router.push(`/login?redirect=${this.$route.fullPath}`)
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
            } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
              this.resetForm('form')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  }
}
</script>

<style lang="sass" scoped>

</style>
